<template>
  <view class="personal-container">
    <!-- 侧边栏 -->
    <filter-aside></filter-aside>
    <!-- 顶部导航 -->
    <nav-bar></nav-bar>
    <view class="user-container">
      <view class="bg-mask"></view>
      <view class="user-inner">
        <view class="user-info">
          <view class="avarat" @click="toLogin">
            <image src="../../static/images/180x180.png" mode="" />
          </view>
          <view class="username">{{ username }}</view>
          <view class="iconfont icon-jiantou_zuoyouqiehuan_o"></view>
        </view>
        <u-grid col="4">
          <u-grid-item
            v-for="(item, index) in iconList"
            :key="index"
            @click="toast"
          >
            <view :class="['iconfont', item.name]"> </view>
            <text class="grid-text title">{{ item.title }}</text>
          </u-grid-item>
        </u-grid>
      </view>
    </view>
  </view>
</template>

<script>
import { getStorage } from '../../utils/auth'
export default {
  data() {
    return {
      iconList: [
        { name: 'icon-dingdan', title: '我的订单' },
        { name: 'icon-fukuan', title: '待付款' },
        { name: 'icon-shouhuo', title: '待收货' },
        { name: 'icon-huiyuandengjidengjizuanshi', title: '会员等级' },
        { name: 'icon-jifen', title: '积分' },
        { name: 'icon-yue', title: '余额' },
        { name: 'icon-hongbao', title: '优惠券' },
        { name: 'icon-llingquxianjinquan', title: '现金卡' },
      ],
    }
  },
  methods: {
    async toLogin() {
      try {
        await getStorage('userInfo')
      } catch (e) {
        // 未登录
        uni.navigateTo({
          url: '/pages/personal/login',
        })
        console.log(e)
      }
    },
    toast() {
      uni.showToast({
        title: '该功能暂未开放',
        duration: 2000,
        icon: 'none',
      })
    },
  },
  computed: {
    username() {
      const userInfo = this.$store.state.user.userInfo
      return userInfo ? userInfo.username : '游客'
    },
  },
  onShow() {
    uni.showTabBar()
  },
}
</script>

<style lang="scss">
page {
  height: calc(100vh - 220rpx);
}
.personal-container {
  .user-container {
    position: relative;
    .bg-mask {
      height: 600rpx;
      background-color: #eee;
    }
    .user-inner {
      position: absolute;
      top: 220rpx;
      left: 50%;
      transform: translate(-50%);
      width: 700rpx;
      height: 680rpx;
      background-color: #fff;
      border-top-left-radius: 20rpx;
      border-top-right-radius: 20rpx;
      .user-info {
        position: relative;
        height: 240rpx;
        background-color: #fff;
        border-top-left-radius: 20rpx;
        border-top-right-radius: 20rpx;
        text-align: center;
        .avarat {
          height: 120rpx;
          image {
            position: absolute;
            top: -90rpx;
            left: 50%;
            transform: translateX(-50%);
            width: 200rpx;
            height: 200rpx;
            border-radius: 50%;
            background-color: $lxins-color-yellow;
          }
        }
        .username {
          line-height: 60rpx;
        }
        .iconfont {
          font-size: $lxins-fs-18;
          font-weight: 600;
        }
      }
      .u-grid {
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        .u-grid-item {
          padding: 40rpx 0;
          color: #999;
          border-right: 1px solid #ddd;
          &:nth-of-type(n + 5) {
            border-top: 1px solid #ddd;
          }
          &:nth-of-type(4n) {
            border-right: none;
          }
          .iconfont {
            font-size: $lxins-fs-24;
          }
          .title {
            margin-top: 12rpx;
            font-size: $lxins-fs-14;
          }
        }
      }
    }
  }
}
</style>
